<template>
  <div class="position-full flex-justify-between">
    <div class="num-left flex-justify-around  el-icon-minus"
         :style="{...iconStyle }"></div>
    <div class="num-center flex-justify-around " :style="{...textStyle}">{{state.values.number}}</div>
    <div class="num-left flex-justify-around  el-icon-plus "
         :style="{...iconStyle }"></div>
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetInputNumber} from "@/modules/IDE/widget/atom/widgetInputNumber";

  export default {
    name: 'InputNumberWidget',
    props: {
      widget: {
        type: WidgetInputNumber,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {formatColor: formatColor};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      textStyle() {
        const {textStyle = {}} = this.state;
        const textStyles = {};
        // 字体
        const {size: fSize, color, weight, align} = textStyle;
        fSize && (textStyles.fontSize = `${fSize}px`);
        color && (textStyles.color = formatColor(color, this.activeTheme));
        weight && (textStyles.fontWeight = weight);
        align && (textStyles.textAlign = align);
        return textStyles;
      },
      iconStyle() {
        if (this.widget.UI.data.iconStyle) {
          const {color = '', size = ''} = this.widget.UI.data.iconStyle
          const iconStyle = {};
          // 字体
          size && (iconStyle.fontSize = `${size}px`);
          color && (iconStyle.color = formatColor(color, this.activeTheme));
          return iconStyle;
        } else {
          return {}
        }
      },
    },
  };
</script>

<style scoped lang="less">

  .num-left {
    width: 20%;
    height: 100%;

  }

  .num-right {
    width: 20%;
    height: 100%;
  }

  .num-center {
    flex: 1;
    height: 100%;
  }
</style>
